﻿<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <div class="caption-subject font-green-haze bold">
                启用底色的按钮 .btn-raised
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <div class="row col-xs-12">
            <a href="javascript:void(0)" class="btn btn-raised btn-default">Default<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised btn-primary">Primary<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised btn-success">Success<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised btn-info">Info<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised btn-warning">Warning<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised btn-danger">Danger<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised btn-link">Link</a>
        </div>
    </div>
</div>

<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <div class="caption-subject font-green-haze bold">
                默认按钮样式 - no class needed
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <div class="row col-xs-12">
            <a href="javascript:void(0)" class="btn btn-default">Default</a>
            <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
            <a href="javascript:void(0)" class="btn btn-success">Success<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-info">Info<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-warning">Warning<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-danger">Danger<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-link">Link</a>
        </div>
    </div>
</div>

<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <div class="caption-subject font-green-haze bold">
                禁用的按钮
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <div class="row col-xs-12">
            <a href="javascript:void(0)" class="btn disabled btn-default">Default</a>
            <a href="javascript:void(0)" class="btn disabled btn-primary">Primary</a>
            <a href="javascript:void(0)" class="btn disabled btn-success">Success</a>
            <a href="javascript:void(0)" class="btn disabled btn-info">Info</a>
            <a href="javascript:void(0)" class="btn disabled btn-warning">Warning</a>
            <a href="javascript:void(0)" class="btn disabled btn-danger">Danger</a>
            <a href="javascript:void(0)" class="btn disabled btn-link">Link</a>
        </div>
    </div>
</div>


<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <div class="caption-subject font-green-haze bold">
                按钮大小
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <div class="row col-xs-12">
            <a href="javascript:void(0)" class="btn btn-raised btn-lg">Large button<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised">Default button<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised btn-sm">Small button<div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-raised btn-xs">xs button</a>
        </div>
    </div>
</div>

<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <div class="caption-subject font-green-haze bold">
                不规则按钮
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <div class="row col-xs-12">
            <a href="javascript:void(0)" class="btn btn-default btn-fab"><i class="material-icons">grade</i></a>
            <a href="javascript:void(0)" class="btn btn-primary btn-fab"><i class="material-icons">grade</i></a>
            <a href="javascript:void(0)" class="btn btn-success btn-fab"><i class="material-icons">grade</i></a>
            <a href="javascript:void(0)" class="btn btn-info btn-fab"><i class="material-icons">grade</i><div class="ripple-container"></div></a>
            <a href="javascript:void(0)" class="btn btn-warning btn-fab"><i class="material-icons">grade</i></a>
            <a href="javascript:void(0)" class="btn btn-danger btn-fab"><i class="material-icons">grade</i></a>
        </div>
    </div>
</div>